<template>
  <div>
    <van-nav-bar
        title="个人中心"
    />
    <van-cell-group>
      <van-cell to="index" size="large">
        <template #title>
          <div class="user">
            <div class="avatar">
              <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="50"/>
            </div>
            <div class="name">
              <div><span class="custom-title">{{ user.username }}</span></div>
              <div>
                <van-tag type="primary" v-if="user.userType===1">教师</van-tag>
                <van-tag type="primary" v-if="user.userType===2">学生</van-tag>
                <van-tag type="primary" v-if="user.userType===3">维修人员</van-tag>
              </div>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="个人信息">
      <van-cell is-link to="modifyName" title="姓名"></van-cell>
      <van-cell is-link to="modifyCardNumber" title="校园卡号"></van-cell>
      <van-cell is-link to="modifyPhone" title="手机号"></van-cell>
      <van-cell is-link to="modifyEmail" title="电子邮件"></van-cell>
    </van-cell-group>

  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {
      user: {
        username: 'dgdg',
        userType: 1
      }
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped>
.user {
  position: relative;
  height: 50px;
}
.avatar {
  position: absolute;
  width: 50px;
  height: 50px;
}
.name {
  position: absolute;
  left: 60px;
}
</style>